<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">
        <meta name="author" content="">

        <title>{$site.name}</title>
        <link rel="shortcut icon" href="__CDN__/assets/img/favicon.ico" />
        <!-- Bootstrap Core CSS -->
        <link href="__CDN__/assets/libs/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
        <link href="__CDN__/assets/css/index.css" rel="stylesheet">
        <style type="text/css">
            #mainbody {
                position: relative;
                width: 100%;
                min-height: auto;
                overflow-y: auto;
                background: #f1f6fd;
                color: #474157;
                height: calc(100vh - 61px);
            }
        </style>
        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
            <script src="https://cdn.staticfile.org/html5shiv/3.7.3/html5shiv.min.js"></script>
            <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body id="page-top">
        <nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <a class="navbar-brand page-scroll" href="#page-top"><strong>环境监测</strong></a>
                </div>
                </div>
            </div>
            <!-- /.container-fluid -->
        </nav>

        <main id="mainbody">
            <div class="container">
                <div class="row" style="margin-top:51px;">
                    <div class="col-lg-12 col-md-12 col-xs-12">
                    <div class="form-inline pull-left">
                        <div class="form-group">
                            <div class="input-group">
                            <div class="input-group-addon">{:__('Devices')}</div>
                            <select class="form-control" name="deviceSelect" style="width:140px;" id="deviceSelect">
                                {foreach name="devList" item="vo"}
                                <option value="{$vo}" {in name="vo" value="" }selected{/in} >{$vo}</option>
                                {/foreach}
                            </select>
                            </div>
                        </div>
                    </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12 col-sm-5 col-lg-4">
                        <div class="row">
                            <div class="col-xs-12 col-sm-12 col-lg-12">
                                <div class="index-gallery" style="padding-top:90px;">
                                    <div id="echart_1" class="btn-refresh" style="height:288px;width:100%;"></div> 
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-12 col-sm-12 col-lg-12">
                                <div class ="text-center"><strong id="updatetime">{$timeStamp}</strong></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-7 col-lg-8">
                        <div class="index-gallery">
                            <div id="echart_2" class="btn-refresh" style="height:380px;width:100%;"></div> 
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-lg-12">
                        <div class="index-gallery" style="padding-top:20px;">
                            <div id="echart_3" class="btn-refresh" style="height:380px;width:100%;"></div> 
                        </div>
                    </div>
                </div>
            </div>
        </main>
        <footer>
            <div class="container">
                <p>Copyright @ 2017~{:date('Y',time())} 版权所有</p>
            </div>
        </footer>
    </body>

    <script src="__CDN__/assets/libs/jquery/dist/jquery.min.js"></script>
    <script src="__CDN__/assets/libs/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="__CDN__/assets/libs/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="__CDN__/assets/js/echarts.min.js"></script>
    <script src="__CDN__/assets/js/echarts-theme.js"></script>
    <script type="text/javascript">
        var myChart1 = echarts.init(document.getElementById('echart_1'), 'walden');
        var myChart2 = echarts.init(document.getElementById('echart_2'), '');
        var myChart3 = echarts.init(document.getElementById('echart_3'), 'walden');
        $("#deviceSelect").change(function(data){
            var devicename = $("#deviceSelect").val();
                console.info("select "+devicename);
                $.ajax({
                        method: 'get',
                        url:"get_data_by_devname?&devicename="+devicename,
                        success: function (data) {
                            console.info(data);
                            updateEcharts(data);
                        }
                });
                
            });
        initEcharts();
        
        function initEcharts(){
            var option1 = {
                title: {
                        text: '当前温湿度'
                    },
                tooltip : {
                    formatter: "{b} : {c}%"
                },
                toolbox: {
                    show: false,
                    feature: {
                        saveAsImage: {}
                    }
                },
                series: [
                    {
                        name: '湿度',
                        center:['50%','85%'],
                        type: 'gauge',
                        radius: '55%',
                        startAngle: 200,
                        endAngle: -20,
                        min: 20,
                        max: 100,
                        splitNumber: 8, 
                        axisLine: {            // 坐标轴线
                            lineStyle: {       // 属性lineStyle控制线条样式
                                width: 6,
                                color:[[0.25, '#6386ce'], [0.62, '#91d7ae'], [1, '#ff9931']]
                            }
                        },
                        axisTick: {            // 坐标轴小标记
                            length: 8,        // 属性length控制线长
                            lineStyle: {       // 属性lineStyle控制线条样式
                                color: 'auto'
                            }
                        },
                        splitLine: {           // 分隔线
                            length: 10,         // 属性length控制线长
                            lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                                color: 'auto'
                            }
                        }, 
                        title:{
                            fontSize:12
                        },
                        detail: {formatter:'{value}%', fontSize:12},
                        axisLabel: {
                            fontSize:10
                        },
                        data: [{value: {$humi}, name: '湿度'}]
                    },{
                        name: '温度',
                        type: 'gauge',
                        startAngle: 210,
                        endAngle: -30,
                        radius: '100%',
                        z: 3,
                        min: -30,
                        max: 50,
                        splitNumber: 8, 
                        axisLine: {            // 坐标轴线
                            lineStyle: {       // 属性lineStyle控制线条样式
                                width: 8,
                                color:[[0.6, '#6386ce'], [0.73, '#91d7ae'], [1, '#ff9931']]
                            }
                        },
                        axisTick: {            // 坐标轴小标记
                            length: 12,        // 属性length控制线长
                            lineStyle: {       // 属性lineStyle控制线条样式
                                color: 'auto'
                            }
                        },
                        splitLine: {           // 分隔线
                            length: 14,         // 属性length控制线长
                            lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                                color: 'auto'
                            }
                        },
                        axisLabel: {
                            backgroundColor: 'auto',
                            borderRadius: 2,
                            color: '#eee',
                            padding: 3,
                            textShadowBlur: 2,
                            textShadowOffsetX: 1,
                            textShadowOffsetY: 1,
                            textShadowColor: '#222'
                        },
                        title : {
                            // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                            fontWeight: 'bolder',
                            fontSize: 14,
                            fontStyle: 'italic'
                        },
                        detail : {
                            // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                            formatter: function (value) {
                                value = (value + '').split('.');
                                value.length < 2 && (value.push('00'));
                                return ('00' + value[0]).slice(-2)
                                    + '.' + (value[1] + '00').slice(0, 2);
                            },
                            offsetCenter:[0, '-20%'], 
                            fontSize: 14,
                            borderRadius: 3, 
                            borderColor: '#aaa',
                            shadowOffsetX: 0,
                            shadowOffsetY: 0,
                            borderWidth: 1,
                            textBorderColor: '#000', 
                            fontFamily: 'Arial',
                            width: 40,
                            color: '#9b9',
                            rich: {}
                        },
                        data:[{value: {$temp}, name: '温度'}]
                    },
                ]};
            var option2 = {
                    title: {
                        text: '本周气温变化',
                        subtext: ''
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['最高气温', '最低气温']
                    },
                    toolbox: {
                        show: false,
                        feature: {
                            dataZoom: {
                                yAxisIndex: 'none'
                            },
                            dataView: {readOnly: false},
                            magicType: {type: ['line', 'bar']},
                            restore: {},
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: {$weeklytemp_col},//['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                    },
                    yAxis: {
                        type: 'value',
                        scale:true,
                        axisLabel: {
                            formatter: '{value} °C'
                        }
                    },
                    series: [
                        {
                            name: '最高气温',
                            type: 'line',
                            data: {$weeklytemp_hi},
                            
                            markPoint: {
                                data: [
                                    {type: 'max', name: '最大值'},
                                    {type: 'min', name: '最小值'}
                                ]
                            },
                            markLine: {
                                data: [
                                    {type: 'average', name: '平均值'}
                                ]
                            }
                        },
                        {
                            name: '最低气温',
                            type: 'line',
                            
                            data: {$weeklytemp_low},
                            markPoint: {
                                data: [
                                    {type: 'max', name: '最大值'},
                                    {type: 'min', name: '周最低'}
                                ]
                            },
                            markLine: {
                                data: [
                                    {type: 'average', name: '平均值'}
                                ]
                            }
                        }
                    ]
            };
            var option3 = {
                title: {
                        text: '全天温湿度变化',
                        subtext: ''
                    },
                color: [
                    "#18d1b1",
                    "#3fb1e3",
                    "#626c91",
                    "#a0a7e6",
                    "#c4ebad",
                    "#96dee8"
                ],
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['温度','湿度']
                },
                toolbox: {
                    show: false,
                    feature: {
                        magicType: {show: true, type: ['stack', 'tiled']},
                        saveAsImage: {show: true}
                    }
                },
                dataZoom: [{
                    type: 'slider',
                    height:20,
                    bottom:0,
                    start: 67,
                    end: 100
                }],
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: {$column}
                },
                yAxis: [
                    {
                        axisLabel: {
                            formatter: '{value} °C'
                        },
                        name: '温度',
                        type: 'value',
                        scale:true,
                        position: 'left',
                        splitLine: {
                            show: true
                        }
                    }, {
                        name: '湿度',
                        type: 'value',
                        min: 20,
                        max: 100,
                        position: 'right',
                        axisLabel: {
                            formatter: '{value} %'
                        },
                        splitLine: {
                            show: true
                        }
                    }
                ],
                grid: [{
                    bottom: 20
                }],
                series: [{
                    name: '温度',
                    type: 'line',
                    smooth: true,
                    areaStyle: {
                        normal: {}
                    },
                    lineStyle: {
                        normal: {
                            width: 1.5
                        }
                    },
                    markPoint: {
                                data: [
                                    {type: 'max', name: '最高温度'},
                                    {type: 'min', name: '最低温度'}
                                ]
                            },
                    markLine: {
                        data: [
                            {type:'average',name: '平均温度'}
                        ]
                    },
                    data: {$temperaturedata}
                },{
                    name: '湿度',
                    type: 'line',
                    smooth: true,
                    areaStyle: {
                        normal: {}
                    },
                    lineStyle: {
                        normal: {
                            width: 1.5
                        }
                    },
                    markPoint: {
                                data: [
                                    {type: 'max', name: '最大值'},
                                    {type: 'min', name: '最小值'}
                                ]
                            },
                    markLine: {
                        data: [
                            {type:'average',name: '平均湿度'}
                        ]
                    },
                    data: {$humiditydata}
                }]
            };
            myChart1.setOption(option1,true);
            myChart2.setOption(option2,true);
            myChart3.setOption(option3,true);
        }
        
        function updateEcharts(data){
            console.info(data.humi);
            console.info(data.timeStamp);
            $("#updatetime").text(data.timeStamp);
            var option1 = {
                title: {
                        text: '当前温湿度'
                    },
                tooltip : {
                    formatter: "{b} : {c}%"
                },
                toolbox: {
                    show: false,
                    feature: {
                        saveAsImage: {}
                    }
                },
                series: [
                    {
                        name: '湿度',
                        center:['50%','85%'],
                        type: 'gauge',
                        radius: '55%',
                        startAngle: 200,
                        endAngle: -20,
                        min: 20,
                        max: 100,
                        splitNumber: 8, 
                        axisLine: {            // 坐标轴线
                            lineStyle: {       // 属性lineStyle控制线条样式
                                width: 6,
                                color:[[0.25, '#6386ce'], [0.62, '#91d7ae'], [1, '#ff9931']]
                            }
                        },
                        axisTick: {            // 坐标轴小标记
                            length: 8,        // 属性length控制线长
                            lineStyle: {       // 属性lineStyle控制线条样式
                                color: 'auto'
                            }
                        },
                        splitLine: {           // 分隔线
                            length: 10,         // 属性length控制线长
                            lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                                color: 'auto'
                            }
                        }, 
                        title:{
                            fontSize:12
                        },
                        detail: {formatter:'{value}%', fontSize:12},
                        axisLabel: {
                            fontSize:10
                        },
                        data: [{value: data.humi, name: '湿度'}]
                    },{
                        name: '温度',
                        type: 'gauge',
                        startAngle: 210,
                        endAngle: -30,
                        radius: '100%',
                        z: 3,
                        min: -30,
                        max: 50,
                        splitNumber: 8, 
                        axisLine: {            // 坐标轴线
                            lineStyle: {       // 属性lineStyle控制线条样式
                                width: 8,
                                color:[[0.6, '#6386ce'], [0.73, '#91d7ae'], [1, '#ff9931']]
                            }
                        },
                        axisTick: {            // 坐标轴小标记
                            length: 12,        // 属性length控制线长
                            lineStyle: {       // 属性lineStyle控制线条样式
                                color: 'auto'
                            }
                        },
                        splitLine: {           // 分隔线
                            length: 14,         // 属性length控制线长
                            lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                                color: 'auto'
                            }
                        },
                        axisLabel: {
                            backgroundColor: 'auto',
                            borderRadius: 2,
                            color: '#eee',
                            padding: 3,
                            textShadowBlur: 2,
                            textShadowOffsetX: 1,
                            textShadowOffsetY: 1,
                            textShadowColor: '#222'
                        },
                        title : {
                            // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                            fontWeight: 'bolder',
                            fontSize: 14,
                            fontStyle: 'italic'
                        },
                        detail : {
                            // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                            formatter: function (value) {
                                value = (value + '').split('.');
                                value.length < 2 && (value.push('00'));
                                return ('00' + value[0]).slice(-2)
                                    + '.' + (value[1] + '00').slice(0, 2);
                            },
                            offsetCenter:[0, '-20%'], 
                            fontSize: 14,
                            borderRadius: 3, 
                            borderColor: '#aaa',
                            shadowOffsetX: 0,
                            shadowOffsetY: 0,
                            borderWidth: 1,
                            textBorderColor: '#000', 
                            fontFamily: 'Arial',
                            width: 40,
                            color: '#9b9',
                            rich: {}
                        },
                        data:[{value: data.temp, name: '温度'}]
                    },
                ]};
            var option2 = {
                    title: {
                        text: '本周气温变化',
                        subtext: ''
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['最高气温', '最低气温']
                    },
                    toolbox: {
                        show: false,
                        feature: {
                            dataZoom: {
                                yAxisIndex: 'none'
                            },
                            dataView: {readOnly: false},
                            magicType: {type: ['line', 'bar']},
                            restore: {},
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: data.weeklytemp_col,//['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                    },
                    yAxis: {
                        type: 'value',
                        scale:true,
                        axisLabel: {
                            formatter: '{value} °C'
                        }
                    },
                    series: [
                        {
                            name: '最高气温',
                            type: 'line',
                            data: {$weeklytemp_hi},
                            
                            markPoint: {
                                data: [
                                    {type: 'max', name: '最大值'},
                                    {type: 'min', name: '最小值'}
                                ]
                            },
                            markLine: {
                                data: [
                                    {type: 'average', name: '平均值'}
                                ]
                            }
                        },
                        {
                            name: '最低气温',
                            type: 'line',
                            
                            data: data.weeklytemp_low,
                            markPoint: {
                                data: [
                                    {type: 'max', name: '最大值'},
                                    {type: 'min', name: '周最低'}
                                ]
                            },
                            markLine: {
                                data: [
                                    {type: 'average', name: '平均值'}
                                ]
                            }
                        }
                    ]
            };
            var option3 = {
                title: {
                        text: '全天温湿度变化',
                        subtext: ''
                    },
                color: [
                    "#18d1b1",
                    "#3fb1e3",
                    "#626c91",
                    "#a0a7e6",
                    "#c4ebad",
                    "#96dee8"
                ],
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['温度','湿度']
                },
                toolbox: {
                    show: false,
                    feature: {
                        magicType: {show: true, type: ['stack', 'tiled']},
                        saveAsImage: {show: true}
                    }
                },
                dataZoom: [{
                    type: 'slider',
                    height:20,
                    bottom:0,
                    start: 67,
                    end: 100
                }],
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: data.column
                },
                yAxis: [
                    {
                        axisLabel: {
                            formatter: '{value} °C'
                        },
                        name: '温度',
                        type: 'value',
                        scale:true,
                        position: 'left',
                        splitLine: {
                            show: true
                        }
                    }, {
                        name: '湿度',
                        type: 'value',
                        min: 20,
                        max: 100,
                        position: 'right',
                        axisLabel: {
                            formatter: '{value} %'
                        },
                        splitLine: {
                            show: true
                        }
                    }
                ],
                grid: [{
                    bottom: 20
                }],
                series: [{
                    name: '温度',
                    type: 'line',
                    smooth: true,
                    areaStyle: {
                        normal: {}
                    },
                    lineStyle: {
                        normal: {
                            width: 1.5
                        }
                    },
                    markPoint: {
                                data: [
                                    {type: 'max', name: '最高温度'},
                                    {type: 'min', name: '最低温度'}
                                ]
                            },
                    markLine: {
                        data: [
                            {type:'average',name: '平均温度'}
                        ]
                    },
                    data: data.temperaturedata
                },{
                    name: '湿度',
                    type: 'line',
                    smooth: true,
                    areaStyle: {
                        normal: {}
                    },
                    lineStyle: {
                        normal: {
                            width: 1.5
                        }
                    },
                    markPoint: {
                                data: [
                                    {type: 'max', name: '最大值'},
                                    {type: 'min', name: '最小值'}
                                ]
                            },
                    markLine: {
                        data: [
                            {type:'average',name: '平均湿度'}
                        ]
                    },
                    data: data.humiditydata
                }]
            };
            myChart1.setOption(option1,true);
            myChart2.setOption(option2,true);
            myChart3.setOption(option3,true);
        }
    </script>
</html>
